$(function(){
    // 定义一个全局变量，用来接收页数,初始值设为0
    let page = 0
    let pagelarge
    // 页面加载完成就需要渲染一次
    pageChange(page)

    $('main .btns .uppage').css({
        opacity:'0.5',
        background:'#ccc'
    })


   
    $.ajax({
        methond:'get',
        url:'http://chst.vip:1234/api/getmoneyctrl',
        async:true,
        success:function(val){
            pagelarge = Math.ceil(val.totalCount/val.pagesize)
            //  根据页数，创建对应个数的option
            for(let i=0;i<=pagelarge;i++){
                $('main .btns select').append($(`<option>${i+1}/${pagelarge}</option>`))
            }
        }
    
    })

    
    

    //  绑定下一页事件
    let nextPage = $('main .btns .nextpage')
   
    nextPage.click(function(){
        if(page==pagelarge-1){
            page = pagelarge-1
            $(this).css({
                opacity:'0.5',
                background:'#ccc'
            })
            $('main  .btns .uppage').css({
                opacity:'1',
                background:'white'
            })
        }else if(page<pagelarge-1){
            console.log(page,pagelarge);
            page++
            pageChange(page)
            $('main .btns select').val(`${page+1}/${pagelarge}`)
            $('main  .btns .uppage').css({
                opacity:'1',
                background:'white'
            })
        }
        
       
    })
   





    // 绑定上一页事件
    let upPage = $('main .btns .uppage')

    upPage.click(function(){
        if(page==0){
            page=0
            $('main .btns select').val(`${page+1}/${pagelarge}`)
            $(this).css({
                opacity:'0.5',
                background:'#ccc'
            })
        }else if(page>0){
            page--
            pageChange(page)
            $('main .btns select').val(`${page+1}/${pagelarge}`)
            $('main  .btns .nextpage').css({
                opacity:'1',
                background:'white'
            })
        }
    })




    // 绑定select事件
    $('main .btns select').change(function(){
        page = $('main .btns select option:selected').text().split('/')[0]
        if(page!=0){
            $('main  .btns .uppage').css({
                opacity:'1',
                background:'white'
            })
            $('main  .btns .nextpage').css({
                opacity:'1',
                background:'white'
            })
        }
        pageChange(page)
    })



    // 定义渲染函数
    function pageChange(nowPage){
        fetch(`http://chst.vip:1234/api/getmoneyctrl?pageid=${nowPage}`).then(response1=>{
            return response1.json()
        }).then(val1=>{
            // console.log(val1.result);
            let listr = ''
            val1.result.forEach(item => {
                
                listr+=`<li productId=${item.productId}>
                        <div class="left">
                            <img src=${item.productImg2.match(/[0-9a-zA-Z:/.]+/g)[8]} alt="">
                        </div>
                        <div class="right">
                            <p>${item.productName}</p>
                            <p>
                                <span>${item.productFrom}|${item.productTime}</span>
                                <span>
                                    <i class="iconfont icon-pinglun"></i>
                                    <span>${item.productComCount}</span>
                                </span>
                            </p>
                        </div>
                    </li>`
            });
           $('main ul').html(listr)
           $('main ul li').click(function(){
               location.href = `http://127.0.0.1:5500/domo/千锋商城项目/html/moneyctrlin.html?productId=${$(this).attr('productId')}`
           })
        })
    }
})